<script setup lang="ts">
import ClassStatByClass from './components/ClassStatByClass.vue'
import ClassStatByGrade from './components/ClassStatByGrade.vue'
import ClassStatByTeacher from './components/ClassStatByTeacher.vue'
import ClassStatByCampus from './components/ClassStatByCampus.vue'

import { useForm, useTable } from '@/hooks'
import { type ClassInfoApi, ReportApi } from '@/apis'

// 更多筛选
const filterCollapsed = ref<boolean>(true)

const { form, resetForm } = useForm<ClassInfoApi.ClassQuery>({
  keyword: undefined,
  subject: undefined,
  classYear: new Date().getFullYear(),
  classCategory: 1,
  campusId: undefined,
  classroomId: undefined,
  term: undefined,
  grade: undefined,
  classTypeId: undefined,
  leadTeacherId: undefined,
  classStatus: undefined,
  saleStatus: undefined,
})

// 呈现维度
const dimensionType = ref('class')
const classStateByClass = ref()
const classStateByTeacher = ref()
const onExport = async () => {
  classStateByClass.value.onExport()
  // if (dimensionType.value === 'teacher') {
  //   classStateByTeacher.value.onExport()
  // } else {
  //   classStateByClass.value.onExport()
  // }
}

const {
  tableData,
  loading,
  search,
} = useTable(() => ReportApi.getClassStatList(form), { immediate: false })

onMounted(() => {

})
</script>

<template>
  <ProPage title="班级三率" :flex-table="false" :loading="loading" description="数据非实时，每小时整点统计一次数据">
    <template #extra>
      <a-button type="primary" @click="onExport">
        导出
      </a-button>
    </template>
    <a-space direction="vertical" size="medium">
      <a-space>
        <label class="label">关键词</label>
        <a-input
          v-model="form.keyword"
          class="!min-w-360px"
          placeholder="班级名称关键词"
          search-button
          allow-clear
          @press-enter="search"
        />
        <a-button type="primary" @click="search">
          搜索
        </a-button>
        <CollapseButton v-model="filterCollapsed" />
      </a-space>
      <a-space v-show="filterCollapsed" direction="vertical" size="medium">
        <a-space>
          <label class="label">学期年级</label>
          <YearTermCascader v-model:class-year="form.classYear" v-model:term="form.term" class="!min-w-200px" check-strictly />
          <DictSelect v-model="form.grade" type="select" code="Grade" placeholder="年级" class="!min-w-120px" multiple />
          <DictSelect v-model="form.subject" type="select" code="Subject" placeholder="科目" class="!min-w-120px" />
        </a-space>

        <a-space>
          <label class="label">其他条件</label>
          <EmployeeSelect v-model="form.leadTeacherId" type="LEAD_TEACHER" placeholder="主讲老师" class="!min-w-150px" />
          <ClassTypeSelect v-model="form.classTypeId" placeholder="班型" class="!min-w-150px" />
          <ClassroomCascader v-model:campus-id="form.campusId" v-model:classroom-id="form.classroomId" class="!min-w-200px" check-strictly />
        </a-space>
        <a-space>
          <label class="label">展示维度</label>
          <a-radio-group v-model="dimensionType" type="button">
            <a-radio value="class">
              班级
            </a-radio>
            <a-radio value="grade">
              年级
            </a-radio>
            <a-radio value="teacher">
              老师
            </a-radio>
            <a-radio value="campus">
              校区
            </a-radio>
          </a-radio-group>
        </a-space>
      </a-space>
    </a-space>
    <a-divider />
    <div class="h-70vh">
      <ClassStatByClass v-if="dimensionType === 'class'" ref="classStateByClass" :records="tableData" />
      <ClassStatByGrade v-else-if="dimensionType === 'grade'" :records="tableData" />
      <ClassStatByTeacher v-else-if="dimensionType === 'teacher'" ref="classStateByTeacher" :records="tableData" />
      <ClassStatByCampus v-else-if="dimensionType === 'campus'" :records="tableData" />
    </div>
  </ProPage>
</template>

<style lang="less" scoped>
.label {
  display: inline-block;
  width: 60px;
  text-align: right;
  flex-shrink: 0;
  margin-right: 10px;
  color: var(--color-text-1);
}
</style>
